<template>
  <div class="resourceManagement grid">
    <!-- 上 -->
    <div class="resourceManagement_top flex flex-r">
      <resourceManagementTopLeft class="flex-2 mr-10" />
      <resourceManagementTopRight class="flex-1" />
    </div>
    <!-- 下 -->
    <div class="resourceManagement_bottom flex flex-r">
      <resourceManagementBottomLeft class="mr-10 flex-1" />
      <resourceManagementBottomcenter class="mr-10 flex-1" />
      <resourceManagementBottomright class="flex-1" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
import resourceManagementTopLeft from "./components/resourceManagement-top/resourceManagementTopLeft.vue";
import resourceManagementTopRight from "./components/resourceManagement-top/resourceManagementTopRight.vue";
import resourceManagementBottomLeft from "./components/resourceManagement-bottom/resourceManagementBottomLeft.vue";
import resourceManagementBottomcenter from "./components/resourceManagement-bottom/resourceManagementBottomcenter.vue";
import resourceManagementBottomright from "./components/resourceManagement-bottom/resourceManagementBottomright.vue";

const store = useStore();

const props = defineProps<{}>();

onMounted(() => { });

onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.resourceManagement {
  width: 100%;
  padding: 10px;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;

  //   height: 820px;
  .resourceManagement_top {
    width: 100%;
  }

  .resourceManagement_bottom {
    width: 100%;
  }
}
</style>